<!-- 文章详情页面 -->
<template>
     <div class="articel-detail"   >
        <!-- <h2>{{articalDetail.title}}</h2> -->
        <h2>文章标题：{{ title}}</h2>
         
        <span>作者：{{create_by?articalDetail.create_by:'llvyr'}}</span> 
        <span>发布时间：{{createdAt}}</span>
               <div class="title">
                     <el-input placeholder="请输入文章的标题" v-model="title"></el-input>
                     <el-input placeholder="请输入文章的简介"
                     v-model="summary"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                     ></el-input>
                     <el-form class="form">
                        <el-form-item label="文章分类">
                           <el-radio-group v-model="category_id" @change="change">
                           <el-radio
                              :disabled="!item.status"
                              :label="item.id"
                              v-for="item in categories"
                              :key="item.id"
                           >{{item.name}}</el-radio>
                           </el-radio-group>
                     </el-form-item>
                     </el-form>
                     </div>
                  <!-- tabbar切换 -->
                  <el-tabs v-model="activeName" class="demo-tabs" 
                  @tab-click="handleClick">

                  <el-tab-pane label="markdown" name="1">
                     <!--markdown  -->
                     <div id="editor"></div>
                     <el-button class="btn-submit" @click="submitArticel" type="primary">提交</el-button>

                  </el-tab-pane>
                  <!-- 富文本 -->
                  <el-tab-pane label="富文本" name="2">
                     <div id="editorWang"></div>
               <el-button class="btn-submit" @click="submitArticel" type="primary">提交</el-button>
                  </el-tab-pane>
                  
               </el-tabs>
                     

     
      
     </div>
</template>

<script setup>
import {ref,onMounted ,reactive,torefs,toRef} from 'vue'
import { useRoute } from 'vue-router'
import {getArticelById} from "@/api/sysArtical"
 
import Editor from '@toast-ui/editor';
import E from 'wangeditor'
import { UpdateArtical} from "@/api/sysArtical"
import { getCategoricallist } from '@/api/sysCategorical'
import { ElMessage    } from 'element-plus'

let route = new useRoute()
// let articalDetail = ref({})
 
 // 激活项
let activeName = ref('1')
// 标题
let title =  ref('')
let summary = ref('')
let categories = ref("")
 let category_id = ref (1)
 let content = ref ('')
 let createdAt = ref ('')
 let editor ;
 let editorWang ;
 

const init= async(id)=>{
   const {data} = await getArticelById(id)
   const articalDetail = data
   title.value =articalDetail.title
   summary.value = articalDetail.summary
   category_id.value = articalDetail.category_id
   content.value = articalDetail.content
   createdAt.value = articalDetail.createdAt
   // console.log(1);
   console.log(content.value);
  
}

// 初始化 要在daom渲染完毕后
 onMounted( async()=>{
     await init(route.params.id)
     initMarkdown()
     })
 

const handleClick = (tag) => {
  activeName.value=tag.props.name
}
 // 获取文章类型
const getCategoricalList = async () => {
  const {
    data: { rows },
  } = await getCategoricallist()
  categories.value = rows
}
getCategoricalList()

const change = (val) => {
  categories.value.forEach((item) => {
    if (item.name == val) {
       category_id.value = item.id
      return
    }
  })
 
}

// 初始化Markdown
const initMarkdown=()=>{
   
 editor = new Editor({
  el: document.querySelector('#editor'),
  height: '500px',
  initialEditType: 'markdown',
  // 初始值
  initialValue:content.value,
  previewStyle: 'vertical'
});


editorWang = new E('#editorWang')
editorWang.config.showMenuTooltips= true
editorWang.config.menuTooltipPosition= 'down'
 // 回显
editorWang.create()
editorWang.txt.html(content.value)
 
}

// 提交编辑哈的Markdown文本
const submitArticel = async()=>{
  const content = activeName.value==1? editor.getHTML():editorWang.txt.html()
  const data = await UpdateArtical({
     id:route.params.id,
    content,
    title:title.value,
    category_id:category_id.value,
    summary:summary.value
  })
  if(data.code == 200){
    ElMessage.success(data.msg)
    // 重置
    editor.reset()
    editorWang.txt.html('')
    title.value=''
    summary.value=''
  }

}





</script>
<style lang='less' scoped>
.articel-detail{
   padding: 30px;
}
 h2{
    margin:10px auto;
    text-align: center;
 }
 p{
    margin: 10px 30px;
 }
 span{
    color: rgb(154, 154, 156);
    font-size: small;
    margin-right: 20px;
 }
 .edit{
    float: right;
 }
</style>